import { useEffect, useState } from "react";
import Vditor from "vditor";
import "vditor/dist/index.css";
import "./vditor-custom.css"; // 导入自定义 CSS

interface VditorProps {
  value?: string;
  onChange?: (value: string) => void;
}

const IrEditor = ({ value, onChange }: VditorProps) => {
  const [vd, setVd] = useState<Vditor>();

  useEffect(() => {
    const vditor = new Vditor("vditor", {
      after: () => {
        vditor.setValue(value || "`Vditor` 最小代码示例");
        setVd(vditor);

        // 设置初始输入后触发一次 onChange
        if (onChange) {
          onChange(vditor.getValue());
        }
      },
      input: (value) => {
        console.log("input", value);

        onChange?.(value);
      },
      mode: "ir", // 实时渲染模式
      toolbar: [], // 完全隐藏工具栏
      toolbarConfig: {
        hide: true, // 隐藏工具栏
      },
      cache: {
        enable: false, // 禁用缓存避免内容冲突
      },
      placeholder: "输入 Markdown 内容...",
      height: 400, // 设置编辑器高度
    });

    // 清理效果
    return () => {
      vd?.destroy();
      setVd(undefined);
    };
  }, []);

  // 当外部 value 变化时更新编辑器内容
  useEffect(() => {
    if (vd && value !== undefined) {
      // 只在编辑器内容与传入值不同时更新，避免循环
      const currentValue = vd.getValue();
      if (currentValue !== value) {
        vd.setValue(value);
        // 移除这里的 onChange 调用，因为它可能导致循环更新
        onChange?.(value);
      }
    }
  }, [vd, value]); // 添加 onChange 到依赖数组

  return <div id="vditor" className="vditor" />;
};

export default IrEditor;
